<template>
  <header>
    <el-menu
      :default-active="$router.currentRoute.value.path"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="/home">
        <el-image style="width: 6vw; height: 5vh" :src="baseUrl + '/api/imgs/article/logo.png'"/>
      </el-menu-item>
      <div class="flex-grow" />
      <el-menu-item index="/home">首页</el-menu-item>
      <el-sub-menu index="2">
        <template #title>博客</template>
        <el-menu-item index="/frontier">前沿技术</el-menu-item>
        <el-menu-item index="/daily">每日刷题</el-menu-item>
        <el-menu-item index="/paper">论文解读</el-menu-item>
        <el-menu-item index="/feeling">心情随笔</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/publish">发布博客</el-menu-item>
      <el-menu-item id="menu3" index="/board">留言板</el-menu-item>
      <el-col id="formSearch" :span="4" >
        <el-input @keyup.enter="handleSearch(form.search)" v-model="form.search" placeholder="输入 内容+回车 搜索">
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
          <template #append>
            <el-button @click="handleSearch(form.search)">
              <el-icon><ArrowRightBold /></el-icon>
            </el-button>
          </template>
        </el-input>
      </el-col>
      <el-sub-menu id="menu4" index="4">
        <template #title>
          <el-row>
            <el-col :span="14" >
              <el-avatar :size="50" :src="baseUrl + $store.state.avatar + '?r=' + Math.random()*1000" /> 
            </el-col>
            <el-col :span="10">
              <!-- <span id="authorname">{{' ' + $store.state.nickname}}</span> -->
            </el-col>
          </el-row>
        </template>
        <el-menu-item index="/myhome">个人主页</el-menu-item>
        <el-menu-item v-if="$store.state.role !== 'USER'" index="/admin/home">管理员首页</el-menu-item>
        <el-menu-item index="/logout">退出登录</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </header>
</template>

<script>
// import {mapState} from 'vuex'
import api from '../../api/data.js'
import { ArrowRightBold, Search } from '@element-plus/icons-vue'
export default {
  name: 'BlogHeader',
  components: {
    Search,
    ArrowRightBold
  },
  data () {
    return {
      baseUrl: api.baseUrl,
      form: {
        search: ''
      }
    }
  },
  methods: {
    handleSelect (key) {
      if (key === '/logout') {
        this.$store.commit('logout')
      }
      this.$router.push({path: key})
    },
    handleSearch (key) {
      this.$router.push({path: '/blogs', query: {search: key}})
    },
  },
  computed: {
  }
}
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
#formSearch {
  margin-top: 8px;
  /* margin-left: 30px; */
  /* margin-right: 30px; */
}
#formSearch .el-input {
  margin-top: 4px;
}
#menu3 {
  margin-right: 14vw;
}
#menu4 {
  margin-left: 10vw;
}
</style>
